import { login } from "@/services/ant-design-pro/api";
import { s_getLoginCount } from "@/services/basis";
import { Column, Line, Pie } from "@ant-design/charts"
import { ArrowDownOutlined, ArrowUpOutlined, LikeOutlined } from "@ant-design/icons";
import { useDeepCompareEffect } from "@ant-design/pro-components";
import { useRequest } from "@umijs/max";
import { Button, Card, Carousel, Col, Row, Select, Space, Statistic, Typography } from "antd";
import moment from "moment";
import { Divider } from "rc-menu";
import { useEffect, useState } from "react";
 

const App:React.FC=()=>{
  const [loginCount,setLoginCount]=useState();
  useRequest(()=>s_getLoginCount({px_id:1,pmodel:'price',type:'day',
                                  begindate:'2023-01-01',
                                  enddate:moment().format('YYYY-MM-DD')}),{
    onSuccess:(data:any)=>{
         setLoginCount(data);
    }
  });
  
  //{px_id,pmodel,type,begindate,enddate}

  //折线图，注意双折线的数据，要依次并行录入。
  const data=[
    {month:'1月',value:560,type:'机加工车间'},{month:'1月',value:660,type:'总装车间'},
    {month:'2月',value:600,type:'机加工车间'},{month:'2月',value:500,type:'总装车间'},
    {month:'3月',value:550,type:'机加工车间'},{month:'3月',value:700,type:'总装车间'},
    {month:'4月',value:800,type:'机加工车间'},{month:'4月',value:800,type:'总装车间'},
    {month:'5月',value:780,type:'机加工车间'},{month:'5月',value:800,type:'总装车间'},
    {month:'6月',value:820,type:'机加工车间'}, {month:'6月',value:900,type:'总装车间'},
    {month:'7月',value:700,type:'机加工车间'},{month:'7月',value:800,type:'总装车间'},
    {month:'8月',value:660,type:'机加工车间'},{month:'8月',value:700,type:'总装车间'},
    {month:'9月',value:810,type:'机加工车间'},{month:'9月',value:800,type:'总装车间'},
    {month:'10月',value:760,type:'机加工车间'},{month:'10月',value:800,type:'总装车间'},
     ];
 
  const config={
    data,
    xField:'month',
    yField:'value',
    colorField:'type',
    
    };
// //饼图--逆时针显示数据
const data2=[
  {type:'五金备件',value:2100},
  {type:'仪器仪表',value:1800},
  {type:'工装夹具',value:1500},
  {type:'运输工具',value:1200},
  {type:'其他',value:2200},
];

// //小程序查询统计
// const config={
//   // data:loginCount,
//   xField:'item',
//   yField:'count',
// }
//柱状图--部门业绩评比
const data3=[
  {org:'电气类',value:36},
  {org:'机械类',value:30},
  {org:'工艺类',value:28},
  {org:'操作类',value:15},
  {org:'其他',value:12},
];
  
  return(
    <>
    <Row gutter={8}>
      <Col span={4}>
        <Card style={{height:100}}>
          <Statistic title='本月累计保养次数' value={121} prefix={<ArrowUpOutlined/>} suffix='次'
           valueStyle={{color:"green"}}/>
        </Card></Col>
      <Col span={4}>
        <Card style={{height:100}}>
          <Statistic title='本月累计维修次数' value={86}   prefix={<ArrowDownOutlined/>} valueStyle={{color:"green"}} 
          suffix="次"/>
        </Card></Col>
        <Col span={4}>
        <Card style={{height:100,color:'red'}}    >
          <Statistic title='本月刀具使用量' value={1850}  suffix="小时" prefix={<ArrowUpOutlined />} 
          valueStyle={{color:"red"}} />
        </Card></Col>
        <Col span={4}>
        <Card style={{height:100}}>
          <Statistic title='本月刀具报废量' value={26} prefix={<ArrowDownOutlined/>} suffix='把'
           valueStyle={{color:"green"}} />
        </Card></Col>
        <Col span={4}>
        <Card style={{height:100}}>
          <Statistic title='设备安装数' value={16} prefix={<LikeOutlined/>} suffix='台'/>
        </Card></Col>
        <Col span={4}>
        <Card style={{height:100}}>
          <Statistic title='设备报废数' value={3} prefix={<ArrowUpOutlined/>}
            suffix='台' valueStyle={{color:"red"}} />
        </Card>
      </Col>
    </Row>
    <Row style={{marginTop:16}}/>
    <Row gutter={8}   >
      <Col span={8}>
      <Card style={{height:520,overflow:'auto'}} >
          
          <Line {...config}  data={data} title='车间维修月统计'
                      scale={{
                              month:{min:0,max:1000,tickCount:10},value:{min:0,max:1000,tickCount:10}
                            }} 
                      autoFit={true} height={400} />
      </Card>
      </Col>
       <Col span={8}>
      <Card  style={{height:520,overflow:'auto'}} >
          <Pie title='备品备件实时库存'  autoFit={true} data={data2} colorField='type' angleField='value'
             label={{text:'value'}} innerRadius={0.6} height={400}
          />
      </Card>
      </Col>
       <Col span={8}>
      <Card  style={{height:520,overflow:'auto'}} >
          <Column title='维修故障分类月排名'  autoFit={true} data={data3} xField='org'  height={400}
             yField='value' label={{text:'value',textBaseline:'bottom'}}  style={{width:60}} />
      </Card>
      </Col>
    </Row>
     
      <Card style={{height:120}}>
          <Carousel dotPosition="right" autoplay={true} autoplaySpeed={2000} infinite={true}>
            <div>
              <>
                <Typography.Title level={4} style={{color:"red"}}>待办事项</Typography.Title>
                <Typography.Text style={{fontSize:"18px"}} >维修提醒：机加工车间，B-01区，设备A001于15：30将由您维修。</Typography.Text>
             </>
             
              </div>
              <div>
             
             <>
                <Typography.Title level={4} style={{color:"red"}}>待办事项</Typography.Title>
                <Typography.Text style={{fontSize:"18px"}} >保养提醒：喷漆车间，C-09区，设备A001于16：01将由您保养。</Typography.Text>
             </>
              </div>
              <div>
              <>
                <Typography.Title level={4} style={{color:"red"}}>待办事项</Typography.Title>
                <Typography.Text style={{fontSize:"18px"}} >保养提醒：机加工车间，A-21区，设备B001于15：35将由您保养。</Typography.Text>
             </>
             
              </div>
           
          </Carousel>
      </Card>
       
    </>
  );
}

export default App;